/***********总容器***********/
.upper{
    width: 100%;
    height:150vw;
    background-color:#f4f3f8;
}
/**********头部***********/
.upper .header{
    background-color: #3362a6;
    width:100%;
    height:8vw;

    display: flex;
    justify-content: center;
    align-items: center;
}
.upper .header h1{
    color: white;
    font-size: 4vw;
    font-weight: 700;
}
.upper .user-info{
    background-color: #3362a6;
    width:100%;
    height:23vw;
    box-sizing: border-box;
    padding: 5vw;
}
.upper .user-info p:first-child{
    font-size: 5vw;
    color: white;
}
.upper .user-info p:last-child{
    font-size: 4vw;
    color: white;
    margin-top: 2vw;
}
/**********功能分类***********/
.upper ul{
    width:100%;
    background-color: white;
    margin-top: 4vw;
}
.upper ul li{
    box-sizing: border-box;
    padding: 2vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.upper ul li .all-function-style{
    display: flex;
    align-items: center;
}
.upper ul li .all-function-style img{
    width:10vw;
    height:10vw;
    user-select: none;
    cursor: pointer;
}
.upper ul li .all-function-style p{
    font-size: 4vw;
    user-select: none;
    cursor: pointer;
}
.upper ul li p{
    font-size: 4vw;
}
.upper ul .line{
    background-color: #f4f3f8;
    width: 100%;
    height:2vw;
}
    /**********底部***********/
.upper .bottom{
    width:100%;
    height:8vw;
    background-color: white;

    position: fixed;
    left: 0;
    bottom: 0;

    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
}
.upper .bottom li{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.upper .bottom li img{
    width:5vw;
    height:5vw;
    border-radius: 20px;
    user-select: none;/*让文本选中状态无效*/
    cursor: pointer;
}
.upper .bottom li p{
    font-size: 2vw;
    user-select: none;/*让文本选中状态无效*/
    cursor: pointer;
}
.upper .bottom li .bottom-icon{
    margin-top: -5vw;
    margin-left: 3vw;

    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}